<template>
	<view>
		<view class="contanier">
			<view class="pass">
				设置短视频账号后，用户需要关注该账号，并输入指定短视频号后才能参与抽奖
			</view>
	<!-- 		<view class="platform">
				<view @click="tabIndex=index" :class="['flag',tabIndex==index?'checked':'']" v-for="(item,index) in platform" :key="index">
					{{item}}
				</view>
			</view> -->
			<view class="setpass">
				<view class="pass-title">
					<view>{{platform[tabIndex]}}用户ID</view>
					<navigator :url="tabIndex==0?'/pages/article/index?key=5fa9f6431e9b0':'/pages/article/index?key=5fa9f6718e7a3'"><text>?</text></navigator>
				</view>
				<view class="pass-input">
					<input :placeholder="'请输入'+platform[tabIndex]+'用户ID'" style="width: 80%;" maxlength="20" @blur="useridinput"
					 :value="short_video_userid" type="number" />
				</view>
			</view>
			<view class="setpass">
				<view class="pass-title">
					<view>{{platform[tabIndex]}}</view> 
					<navigator :url="tabIndex==0?'/pages/article/index?key=5fa9f6678ac87':'/pages/article/index?key=5fa9f689ceeb7'"><text>?</text></navigator>
				</view>
				<view class="pass-input">
					<input :placeholder="'请输入'+platform[tabIndex]" style="width: 80%;" maxlength="20" @blur="accountinput" :value="short_video_account"
					 type="text" />
				</view>
			</view>
			<view class="setpass">
				<view class="pass-title">
					<view>设置同一用户参与该{{platform[tabIndex]}}最大次数</view>
					<navigator url="/pages/article/index?key=5faa45ce35d55"><text>?</text></navigator>
				</view>
				<view class="pass-input">
					<picker @change="joincountChange" :range="joincount" :value="pickerIndex">
						{{joincount[pickerIndex]}}
					</picker>
				</view>
			</view>
		</view>
		<view class="save-button" @click="comfirmbutton">保存</view>

	</view>
</template>

<script>
	/**
	 * 助力口令
	 */

	export default {
		data() {
			return {
				tabIndex: 0,
				pickerIndex:0,
				platform: ['抖音号', '快手号'],
				short_video_userid: '',
				short_video_account:'',
				joincount:['不限制','1次','2次','3次','4次','5次','6次','7次','8次','9次','10次'],
				id:''
			}
		},
		onLoad(option) {
			console.log(option)
			this.tabIndex = parseInt(option.platformIndex)
			this.id = option.id
			if(this.id){
				this.getdetail()
			}
		},
		methods: {
			//获取详情
			getdetail(){
				this.$HttRequest({
					url: '/shortApp/info',
					param: {id:this.id}
				}).then((res) => {
					console.log(res)
					if (res.status === 10000) {
						this.short_video_userid = res.data.video_userid
						this.short_video_account = res.data.video_account
						this.pickerIndex = res.data.limit
					} else {
						this.$ShowMsg(res.message,'error')
					}
				}).catch((error) => {
					//异常错误
					console.log(error);
				})
			},
			
			joincountChange(e){
				console.log(e)
				this.pickerIndex  = e.detail.value
			},
			useridinput(e) {
				this.short_video_userid = e.detail.value;
			},
			accountinput(e) {
				this.short_video_account = e.detail.value;
			},	
			//保存短视频号
			comfirmbutton() {
				if (!this.short_video_account || !this.short_video_userid) {
					this.$ShowMsg('短视频账号必填', 'error');
					return
				}
				let param = {
						limit:this.pickerIndex,
						platform:this.tabIndex+1,
						video_userid:this.short_video_userid,
						video_account:this.short_video_account
					}
				if(this.id){
					param.id = this.id
				}	
				console.log(param)
				this.$HttRequest({
					url: '/shortApp/add',
					param: param
				},'POST',true).then((res) => {
					console.log(res) 
					if (res.status === 10000) {
						let msgtip=''
						//id不为空视为修改
						if(this.id){
							msgtip ='修改成功'
						}else{
							msgtip ='添加成功'
							//添加ID
							param.id = res.data
						}	
						this.$common.state.shortvideo = param					
						this.$ShowMsg(msgtip,'success')
						setTimeout(()=>{
							uni.navigateBack({
								delta:1 
							})	
						},2500)
					} else {
						this.$ShowMsg(res.message)
					}
				}).catch((error) => {
					//异常错误
					console.log(error);
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f0f0f0;
	}


	.platform {
		width: 98%;
		height: 100rpx;
		background-color: #fff;
		margin: 10rpx auto;
		display: flex;
		justify-content: space-around;
		align-items: center;
		border-radius: 10rpx;

		.flag {
			font-size: 28rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 145rpx;
			height: 55rpx;
			border: 1rpx solid #8e8e8e;
			color: #8e8e8e;
			border-radius: 10rpx;
		}

		.checked {
			border: 1rpx solid $uni-color-primary;
			color: $uni-color-primary;
		}
	}

	.save-button {
		margin: 20rpx auto;
		width: 95%;
		height: 90rpx;
		background-color: $uni-color-primary;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 40rpx;
		color: #fff;
		font-size: 30rpx;
		margin-bottom: 40rpx;

	}

	.intro {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
		color: #808080;
		font-size: 25rpx;

		width: 90%;
		margin: 30rpx auto;

		text {
			margin: 10rpx 0;
		}

		.huodong {
			font-size: 28rpx;
			width: 100%;
			position: relative;
			color: #ababab;
			border-top: 1rpx solid #d3d1d1;
			margin-bottom: 40rpx;

			text {
				text-align: center;
				background-color: #f0f0f0;
				position: absolute;
				top: -35rpx;
				left: 270rpx;
				height: 50rpx;
				width: 80rpx;
				display: block;
				padding: 10rpx;
			}
		}
	}

	.contanier {
		width: 95%;
		margin: 0 auto;
	}

	.setpass {
		flex: 1;
		display: flex;
		justify-content: space-between;
		flex-direction: column;
		align-items: center;
		font-size: 28rpx;
		color: #666666;

		.pass-title {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			height: 80rpx;
			width: 95%;


			text {
				font-size: 22rpx;
				margin-left: 10rpx;
				border: 1rpx solid #747474;
				border-radius: 50%;
				width: 25rpx;
				height: 25rpx;
				display: flex;
				justify-content: center;
				align-items: center;

			}

		}

		.pass-input {
			background-color: #fff;
			width: 100%;
			height: 100rpx;
			border-radius: 10rpx;
			display: flex;
			justify-content: flex-start;

			align-items: center;
			picker{
				margin-left: 40rpx;
				width: 80%;
				height: 80rpx;
				display: flex;
				justify-content: flex-start;
				align-items: center;
			}
			input {
				padding: 0 20rpx;
				font-size: 28rpx;
				margin-left: 20rpx;
			}
		}
	}

	.pass {
		flex: 1;
		border: 1rpx solid #ece6d7;
		color: #736854;
		background-color: #fef7e5;
		padding: 30rpx;
		font-size: 28rpx;
		border-radius: 10rpx;
		margin: 20rpx 0;
	}
</style>
